<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>树洞网后台管理</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <style type="text/css">
        body{
            font-family: "Microsoft Yahei";
        }
        .navbar-inverse {
            border-radius: 0;
        }
        .main-menu {
            background-color: #f5f5f5;
            border: 1px solid #e5e5e5;
            border-radius: 3px;
            box-shadow: 1px 3px 6px #ddd;
            padding: 0;
        }
        .main-menu >p {
            width: 100%;
            cursor: pointer;
            padding: 10px 20px;
            margin: 0;
        }

        .main-menu >p:hover, .main-menu >.active{
            background-color: #55acee;
            color: white;
        }
        .hider{
            padding: 20px 30px;
            border: 1px solid #e5e5e5;
            display: none;
            width: 100%;
        }
        .glyphicon-remove {
            cursor: pointer;
        }
        thead{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-grain"></span> <span class="sr-only">(current)</span></a></li>
            </ul>
        </div>
    </nav>

    <div class="container main">
        <div class="col-md-3 main-menu">
            <h2 class="text-center">Admin Menu List</h2>
            <p id="announcement">系统公告管理</p>
            <p id="userInfo">用户信息管理</p>
            <p id="post">秘密管理</p>
        </div>
        <div class="col-md-9">
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
            </ol>
            <h2>欢迎来到重邮树洞网后台管理界面。</h2>

            <div id="announcementBox" class="hider">
                <table class="table table-hover ">
                   <thead>
                       <tr>
                           <td>#</td>
                           <td>发布者</td>
                           <td>标题</td>
                           <td>内容</td>
                           <td>发布时间</td>
                           <td>删除</td>
                       </tr>
                   </thead>
                   <tbody class="ancmtsContainer">

                   </tbody>
                </table>
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addAncmtBox">添加系统公告</button>
            </div>

            <div id="userInfoBox" class="hider">
                一共找到<code class="userCount"></code>条记录。<br>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <td>#</td>
                        <td>头像</td>
                        <td>用户名</td>
                        <td>邮箱</td>
                        <td>删除</td>
                    </tr>
                    </thead>
                    <tbody class="userInfoContainer">

                    </tbody>
                </table>
                <!--分页-->
                <nav>
                    <ul class="pagination userPagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

            <div id="postBox" class="hider">
                一共找到<code class="postCount"></code>条记录。<br>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <td>#</td>
                        <td>发表人</td>
                        <td>内容</td>
                        <td>标签</td>
                        <td>热度</td>
                        <td>是否匿名</td>
                        <td>发表时间</td>
                        <td>删除</td>
                    </tr>
                    </thead>
                    <tbody class="postContainer">

                    </tbody>
                </table>
                <!--分页-->
                <nav>
                    <ul class="pagination">
                        <li>
                            <a href="javascript:;" aria-label="Previous" onclick="prePageOfPosts()">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="javascript:;" onclick="getPostsByPage(0, 5)">1</a></li>
                        <li>
                            <a href="javascript:;" aria-label="Next" onclick="nextPageOfPosts()">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 添加公告的BOX -->
    <div class="modal fade" id="addAncmtBox" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加系统公告</h4>
                </div>
                <div class="modal-body">
                    <form id="addAncmtForm">
                        <div class="form-group">
                            <label for="ancmtTitle">标题：</label>
                            <input type="email" class="form-control" id="ancmtTitle" placeholder="公告标题">
                        </div>
                        <div class="form-group">
                            <label for="ancmtContent">内容：</label>
                            <textarea type="email" class="form-control" id="ancmtContent" placeholder="公告内容"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="addAncmtBtn" data-dismiss="modal">添加</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/js/utils/jquery.min.js"></script>
    <script type="text/javascript" src="/js/utils/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function getDate(tm){
                var tt=new Date(parseInt(tm)).toLocaleString().substr(0,17);
                return tt;
            }
            /**
             * 公告部分
             */
            $('#announcement').click(function () {
                if($('.active')){
                    $('.active').removeClass('active');
                }
                $(this).addClass('active');
                $.ajax({
                    url: '/ancmts',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        $('.ancmtsContainer').eq(0).empty();
                        var l = data.ancmts.length;
                        if(l > 0){
                            var ancmts = [];
                            var str = '';
                            for(var i = 0; i < l; i++){
                                str = "<tr><td>"+ (i+1) + "</td><td>"+ data.ancmts[i].publisher +"</td><td>"+ data.ancmts[i].title +
                                "</td><td>"+ data.ancmts[i].content +"</td><td>"+ getDate(data.ancmts[i].time) +
                                "</td><td><span class='glyphicon glyphicon-remove' data="+ data.ancmts[i]._id +"></span></td></tr>";
                                ancmts.push(str);
                                str = '';
                            }

                            $('.ancmtsContainer').eq(0).append(ancmts.join(''));

                        } else {
                            $('#announcementBox').prepend('<span>还没有系统公告！</span>');
                            $('#announcementBox >table').hide();
                        }
                        if($('.showing') && $('.showing').attr('id') != 'announcementBox'){
                            $('.showing').hide().removeClass('showing');
                        }
                        $('#announcementBox').fadeIn().addClass('showing');
                    }
                });
            });
            /**
             * 删除公告
             */
            $('.ancmtsContainer').on('click', function(e){
                var id = $(e.target).attr('data');
                if(id){
                    $.ajax({
                        url: '/deleteAncmt',
                        method: 'post',
                        data: {id: id},
                        dataType: 'json',
                        success: function (data) {
                            alert(data.msg);
                            if(data.code == 1){
                                $(e.target).parents('tr').remove();
                            }
                        }
                    });
                }
            });
            /**
             * 发布公告
             */
            $('#addAncmtBtn').click(function(){
                var title = $('#ancmtTitle').val();
                var content = $('#ancmtContent').val();
                if(title && content){
                    $.ajax({
                        url: '/addAncmt',
                        method: 'post',
                        dataType: 'json',
                        data: {title: title, content: content},
                        success: function(data){
                            alert(data.msg);
                        }
                    });
                }
            });

            /**
             * 用户信息部分
             */
            var pageNumber = 0;
            var n = 5;
            var pageNow = 0;
            $('#userInfo').click(function () {
                if($('.active')){
                    $('.active').removeClass('active');
                }
                $(this).addClass('active');
                $.ajax({
                    url: '/getUserByPage',
                    method: 'post',
                    dataType: 'json',
                    data: {pageNumber: pageNumber, n: n},
                    success: function (data) {
                        //清除上次请求的数据
                        $('.userInfoContainer').eq(0).empty();

                        $('.userCount').text(data.count);
                        var l = data.users.length;
                        if(l > 0){
                            var users = [];
                            var str = '';
                            for(var i = 0; i < l; i++){
                                str = "<tr><td>"+ (i+1) + "</td><td><img src='/"+ data.users[i].avatar +"' height='30' width='30' /></td><td>"+
                                        data.users[i].name + "</td><td>"+ data.users[i].email +"</td><td><span class='glyphicon glyphicon-remove' data="+
                                        data.users[i]._id +"></span></td></tr>";

                                users.push(str);

                                str = '';
                            }

                            $('.userInfoContainer').eq(0).append(users.join(''));

                        } else {
                            $('#userInfoBox').append('<span>还没有用户！</span>');
                        }
                        if($('.showing') && $('.showing').attr('id') != 'userInfoBox'){
                            $('.showing').hide().removeClass('showing');
                        }
                        $('#userInfoBox').fadeIn().addClass('showing');
                    }
                });
            });

            /**
             * 删除用户
             */
            $('.userInfoContainer').on('click', function(e){
                if(confirm("确定删除此用户？这会删除有关的所有内容且不能恢复！")){
                    var id = $(e.target).attr('data');
                    if(id){
                        $.ajax({
                            url: '/deleteUser',
                            method: 'post',
                            data: {id: id},
                            dataType: 'json',
                            success: function (data) {
                                alert(data.msg);
                                if(data.code == 1){
                                    $(e.target).parents('tr').remove();
                                }
                            }
                        });
                    }
                }
            });

            /**
             * 秘密管理部分
             */
            var nOp = 5;
            var pageNowOp = 1;
            $('#post').click(function () {
                if($('.active')){
                    $('.active').removeClass('active');
                }
                $(this).addClass('active');

                getPostsByPage(pageNowOp - 1, nOp);

                if($('.showing') && $('.showing').attr('id') != 'postBox'){
                    $('.showing').hide().removeClass('showing');
                }
                $('#postBox').fadeIn().addClass('showing');

            });

            function prePageOfPosts (){
                if((pageNowOp - 1) <= 0){
                    return false;
                }
                getPostsByPage(pageNowOp-1, nOp);
            }

            function nextPageOfPosts (){
                getPostsByPage(pageNowOp, nOp);
            }

            /**
             * 分页获取posts
             */
            function getPostsByPage(page, n) {
                $.ajax({
                    url: '/posts',
                    method: 'post',
                    dataType: 'json',
                    data: {start: page * n, pageNumber: n},
                    success: function (data) {
                        //清除上次请求的数据
                        $('.postContainer').eq(0).empty();

                        $('.postCount').text(data.count);

                        var l = data.posts.length;
                        if (l > 0) {
                            var users = [];
                            var str = '';
                            for (var i = 0; i < l; i++) {
                                str = "<tr><td>" + (i + 1) + "</td><td>" + data.posts[i].userName + "</td><td>" + data.posts[i].content +
                                "</td><td>tags</td><td>" + data.posts[i].good + "</td><td>" + data.posts[i].anonymous + "</td><td>" +
                                getDate(data.posts[i].time) + "</td><td><span class='glyphicon glyphicon-remove' data=" +
                                data.posts[i]._id + "></span></td></tr>";
                                users.push(str);
                                str = '';
                            }

                            $('.postContainer').eq(0).append(users.join(''));

                        } else {
                            $('#postBox').append('<span>未找到更多秘密！</span>');
                        }
                    }
                });
            }


            /**
             * 删除秘密
             */
            $('.postContainer').on('click', function(e){
                var id = $(e.target).attr('data');
                console.log(id);
                if(id){
                    $.ajax({
                        url: '/deletePost',
                        method: 'post',
                        data: {id: id},
                        dataType: 'json',
                        success: function (data) {
                            alert(data.msg);
                            if(data.code == 1){
                                $(e.target).parents('tr').remove();
                            }
                        }
                    });
                }
            });
        });
    </script>
</body>
</html>